<template>
  <div class="type-container">
    <el-descriptions border class="custom-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">申请类型</div>
        </template>
        <div class="custom-content">{{ applicationTypeStr }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请信息正文 -->
  <div class="content-container">
    <div class="clubId-container" v-show="!isAdd">
      <el-descriptions border class="custom-descriptions">
        <el-descriptions-item>
          <template #label>
            <div class="custom-label">社团编号</div>
          </template>
          <div class="custom-content">{{ clubInfo.clubId }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 表单区域 -->
    <div class="form-container">
      <el-form :model="clubInfo" label-width="120px">
        <el-form-item label="社团名称">
          <el-input
            v-model="clubInfo.clubName"
            placeholder="请输入社团名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="社长用户ID">
          <el-input
            v-model="clubInfo.managerId"
            :disabled="isAdd"
            placeholder="请输入社长用户ID"
          ></el-input>
        </el-form-item>

        <el-form-item label="社团分类标签">
          <el-input-tag
            v-model="clubInfo.clubTags"
            :tag-type="tagType"
            :tag-effect="tagEffect"
            placeholder="输入标签文案后回车"
          >
            <template #tag="{ value }">
              <div class="flex items-center">
                <span>{{ value }}</span>
              </div>
            </template>
          </el-input-tag>
        </el-form-item>

        <el-form-item label="社团简介">
          <el-input
            v-model="clubInfo.clubIntroduction"
            type="textarea"
            :rows="4"
            placeholder="请输入社团简介"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <!-- 申请原因填写区域 -->
  <div class="reason-container">
    <el-input
      v-model="reason"
      type="textarea"
      :rows="4"
      placeholder="请输入申请原因（选填）"
    ></el-input>
  </div>

  <!-- 提交申请按钮 -->
  <div class="submit-button-container">
    <el-button type="primary" @click="submit"> 提交申请</el-button>
  </div>
</template>

<script setup lang="ts">
import {
  ElButton,
  ElInput,
  ElMessage,
  ElMessageBox,
  type TagProps,
  type Action,
} from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import {
  type ClubApplicationAddRequest,
  ClubApplicationControllerService,
  ClubControllerService,
} from "../../../../generated";
import { useUserStore } from "../../../stores/user.ts";

interface ClubInfo {
  clubId: number;
  clubName: string;
  clubTags: string[];
  clubIntroduction: string;
  managerId: number;
}

const store = useUserStore();
const isAdd = ref(true);
const applicationTypeStr = ref("");

const route = useRoute();
const type = route.meta.type as number; // 从路由配置的 meta 中获取 type 字段

const clubInfo = ref<ClubInfo>({
  clubId: 0,
  clubName: "",
  clubTags: [],
  clubIntroduction: "",
  managerId: 0,
});

onMounted(async () => {
  if (type === 5) {
    applicationTypeStr.value = "创建社团";
    clubInfo.value.managerId = store.id;
  } else {
    isAdd.value = false;
    applicationTypeStr.value = "修改社团信息";

    // 加载原来的社团信息
    const res = await ClubControllerService.getClubVoById(store.managedClubId);
    if (res?.code === 0) {
      clubInfo.value.clubId = res.data?.id as number;
      clubInfo.value.clubName = res?.data?.clubName as string;
      clubInfo.value.clubTags = res?.data?.tags as string[];
      clubInfo.value.clubIntroduction = res.data?.introduction as string;
      clubInfo.value.managerId = res.data?.userVO?.id as number;
    } else {
      ElMessage.error("信息加载错误，请重试: " + res?.message);
    }
  }
});

const reason = ref("");
const tagType = ref<TagProps["type"]>("primary");
const tagEffect = ref<TagProps["effect"]>("plain");

const submit = async () => {
  const request = {
    userId: store.id,
    clubId: clubInfo.value.clubId,
    reason: reason.value,
    type: type,
    clubName: clubInfo.value.clubName,
    clubTags: clubInfo.value.clubTags,
    clubIntroduction: clubInfo.value.clubIntroduction,
    newManagerId: clubInfo.value.managerId,
  } as ClubApplicationAddRequest;

  const res = await ClubApplicationControllerService.addClubApplication(request);
  if (res.code === 0) {
    const successStr = '申请等级: 社团; 申请类型: ' + applicationTypeStr.value + '; 申请编号:' + res.data;
    ElMessageBox.alert(
      successStr,
      "提交成功",
      {
        confirmButtonText: "确定",
        callback: (action: Action) => {
          if (action === "confirm") {
            try {
              window.close();
            } catch (e) {
              ElMessage({
                type: "info",
                message: "无法自动关闭页面，请手动关闭此标签页。",
                duration: 0,
                showClose: true,
              });
            }
          }
        },
      },
    );
  } else {
    const errorStr = '错误原因: ' + res.message;
    ElMessageBox.alert(errorStr, "提交失败", {
      confirmButtonText: "确定",
      callback: (action: Action) => {
        if (action === "confirm") {
          window.location.reload()  // 刷新当前页面
        }
      },
    })
  }
};
</script>

<style scoped lang="scss">
.view-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.type-container {
  width: 20%;
  margin-bottom: 20px;
  margin-top: 20px;
}
.custom-label,
.custom-content {
  font-size: 15px;
}

.content-container {
  margin-top: 20px;
  margin-bottom: 40px;
}

.clubId-container {
  width: 20%;
  margin-bottom: 40px;
}

.form-container {
  margin-top: 30px;
  margin-bottom: 10px;
}

.reason-container {
  margin-bottom: 20px;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
